<template>
  <view class="home-container-layout">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="home-layout-item"
      @click.native="$emit('layoutClick', item)"
    >
      <u-image class="home-container-layout-img" width="96px" height="72px" mode="aspectFit" :src="item.img" />
      <view class="home-container-layout-title">{{ item.title }}</view>
      <view class="home-container-layout-desc">{{ item.desc }}</view>
      <u-badge v-if="item.title === '任务库'" :is-dot="true" type="error" :count="count" />
    </view>
  </view>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    count: {
      type: Number,
      default: () => 0
    }
  }
};
</script>

<style lang="less" scoped>
.home-container-layout {
    display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 27px;
		> view {
			height: 148px;
			background: #ffffff;
			border-radius: 16px;
			box-shadow: 0px 10px 16px 0px rgba(64,127,255,0.08);
      padding: 20px;
      position: relative;
      .home-container-layout-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }

      .home-container-layout-desc {
        font-size: 12px;
        color: #909399;
        margin-top: 2px;
      }
		}

}
</style>
